<template>
	<cl-crud @load="onLoad">
		<el-row type="flex">
			<cl-refresh-btn />
			<cl-flex1 />
			<cl-search-key />
		</el-row>

		<el-row>
			<cl-table
				:props="{
					'default-sort': {
						prop: 'createTime',
						order: 'descending'
					}
				}"
				:columns="[
					{
						prop: 'headimgurl',
						label: '头像',
						align: 'center'
					},
					{
						prop: 'nickname',
						label: '昵称',
						align: 'center'
					},
					{
						prop: 'country',
						label: '国家',
						align: 'center'
					},
					{
						prop: 'province',
						label: '省份',
						align: 'center'
					},
					{
						prop: 'city',
						label: '城市',
						align: 'center'
					},
					{
						prop: 'sex',
						label: '性别',
						align: 'center'
					},
					{
						prop: 'subscribe',
						label: '是否订阅',
						align: 'center'
					},
					{
						label: '状态',
						prop: 'isEnable',
						align: 'center'
					},
					{
						prop: 'createTime',
						label: '创建时间',
						align: 'center',
						sortable: true
					},
					{
						prop: 'updateTime',
						label: '更新时间',
						align: 'center',
						sortable: true
					},
					{
						align: 'center',
						type: 'op',
						layout: ['slot-info-btn'],
						fixed: 'right',
						width: '130px'
					}
				]"
			>
				<!-- 头像-->
				<template #column-headimgurl="{scope}">
					<el-image
						:src="scope.row.headimgurl + '?x-oss-process=image/resize,h_100'"
						:preview-src-list="[scope.row.headimgurl]"
						:style="{
							height: '40px',
							width: '40px'
						}"
					></el-image>
				</template>

				<!-- 是否订阅 -->
				<template #column-subscribe="{scope}">
					<el-tag v-if="scope.row.subscribe == 0" size="small" effect="plain" type
						>未订阅</el-tag
					>
					<el-tag
						v-if="scope.row.subscribe == 1"
						size="small"
						effect="plain"
						type="success"
						>已订阅</el-tag
					>
				</template>

				<!-- 性别 -->
				<template #column-sex="{scope}">
					<el-tag v-if="scope.row.sex == 0" size="small" effect="plain" type="info"
						>未知</el-tag
					>
					<el-tag v-if="scope.row.sex == 1" size="small" effect="plain" type>男</el-tag>
					<el-tag v-if="scope.row.sex == 2" size="small" effect="plain" type="success"
						>女</el-tag
					>
				</template>

				<!-- 在线状态 -->
				<template #column-online="{scope}">
					<el-tag v-if="scope.row.online == 0" size="small" effect="plain" type="info"
						>不在线</el-tag
					>
					<el-tag v-if="scope.row.online == 1" size="small" effect="plain" typee="success"
						>在线</el-tag
					>
				</template>

				<!-- 状态 -->
				<template #column-isEnable="{scope}">
					<el-switch
						v-model="scope.row.isEnable"
						active-color="#13ce66"
						:active-value="true"
						:inactive-value="false"
						@change="setEnable(scope.row)"
					>
					</el-switch>
				</template>

				<!-- 微信信息 -->
				<template #slot-info-btn="{scope}">
					<el-button type="text" size="mini" @click="showInfo(scope.row)"
						>微信信息</el-button
					>
				</template>
			</cl-table>
		</el-row>

		<el-row type="flex">
			<cl-flex1 />
			<cl-pagination />
		</el-row>

		<el-dialog title="微信信息" :visible.sync="dialogInfo" v-if="dialogInfo" width="20%">
			<div>微信openid：{{ openid }}</div>
			<div>微信unionid：{{ unionid }}</div>
			<div>socketId：{{ socketId }}</div>
		</el-dialog>
	</cl-crud>
</template>

<script>
export default {
	data() {
		return {
			crud: null,
			dialogInfo: false,
			openid: null,
			unionid: null,
			socketId: null
		};
	},

	methods: {
		onLoad({ ctx, app }) {
			this.crud = app;
			ctx.service(this.$service.app.user).done();
			app.refresh();
		},

		showInfo(e) {
			this.dialogInfo = true;
			this.openid = e.openid;
			this.unionid = e.unionid;
			this.socketId = e.socketId;
		},

		setEnable(e) {
			let status = e.isEnable;
			this.$service.app.user
				.enable({
					id: e.id,
					isEnable: status
				})
				.catch((err) => {
					e.isEnable = e.isEnable == true ? false : true;
					this.$message.error(err);
				});
		}
	}
};
</script>

<style lang="stylus" scoped></style>
